<template lang="pug">
.draft
  .draft-header
    el-button(@click="batchDel") 删除
  .draft-table
    el-table(
      :header-cell-style="{ background: '#F3F3F3', fontSize: '14px', color: '#363636' }"
      style="width: 100%"
      :data="list"
      v-loading="loading"
      @selection-change="changeSelection"
      empty-text="未找到符合条件的内容"
    )
      el-table-column(type="selection" width="55" align="center")
      el-table-column(label="材料信息" prop="materialName" align="center")
      el-table-column(label="材料品牌" prop="brandName" align="center")
      el-table-column(label="材料分类" prop="classificationName" align="center")
      el-table-column(label="创建时间" prop="materialName" align="center")
        template(slot-scope="scope") {{new Date(scope.row.createTime).format('yyyy-MM-dd hh:mm:ss')}}
      el-table-column(label="操作" align="center")
        template(slot-scope="scope")
          .table-handles
            .table-handle-item(@click="editMaterial(scope.row)") 编辑
            .table-handle-item(@click="delMaterial(scope.row)") 删除
  .index-pagination
    .pagination-total 共 {{total}} 条
    .pagination-sizes 10 条/页
    el-pagination(
      background
      layout="prev, pager, next, jumper"
      :total="total"
      :page-size="pageSize"
      :current-page="page"
      @current-change="currentChange"
    )
</template>

<script>
import { getMaterialList, deleteMaterial } from 'api'
export default {
  name: 'materialDraft',
  data () {
    return {
      list: [],
      loading: false,
      pageSize: 20,
      page: 1,
      total: 0,
      selections: []
    }
  },
  methods: {
    changeSelection (selections) {
      this.selections = selections
    },
    currentChange (page) {
      this.page = page
      this.getList()
    },
    editMaterial (row) {
      this.$router.push({ name: 'upload', params: { id: row.materialId } })
    },
    delMaterial (row) {
      this.$confirm('确定要删除该材料吗？', '提示').then(async () => {
        try {
          await this.$axios.post(deleteMaterial, { content: { materialList: row.materialId } })
          this.$message.success('删除成功！')
          this.getList()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
    batchDel () {
      if (!this.selections.length) {
        this.$message.error('请选择要删除的草稿！')
        return
      }
      this.$confirm('确定要删除选择的材料吗？', '提示').then(async () => {
        try {
          let ids = this.selections.map(item => item.materialId)
          await this.$axios.post(deleteMaterial, { content: { materialList: ids.join(',') } })
          this.$message.success('删除成功！')
          this.getList()
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
    async getList () {
      try {
        const { ResultSet } = await this.$axios.post(getMaterialList, { content: { status: 0, currentPage: this.page, pageLines: this.pageSize } })
        this.list = ResultSet.userData.materialList
        this.total = ResultSet.recordNumber
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getList()
    })
  }
}
</script>

<style lang="scss" scoped>
.draft {
  padding: 0 32px 16px;
  height: 100%;
}
.draft-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.draft-table {
  margin-top: 20px;
}
.table-handles {
  display: flex;
  justify-content: center;
  .table-handle-item {
    padding: 0 10px;
    white-space: nowrap;
    line-height: 1;
    cursor: pointer;
    border-right: 1px solid #CBCBCB;
    color: #FF2E42;
    &:first-child {
      padding-left: 0;
    }
    &:last-child {
      border-right: none;
    }
  }
}
.index-pagination {
  margin-top: 24px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  color: #7A7A7A;
  .pagination-total {
    margin-right: 10px;
  }
  .pagination-sizes {
    margin-right: 10px;
  }
}
</style>